<!DOCTYPE html>
<html>
  <head>
    <title>red-heart</title>
  </head>
  <style type="text/css">
    .css-cell{
      position: relative;
      width: 100%;
      height: 300px;
    }

    .corner{
      position: absolute;
      top:50%;
      left: 50%;
      transform:translate(-50%,-50%);
      width: 120px;
      height:120px;
      padding:40px;
      background:linear-gradient(-150deg,transparent 1.5em, yellowgreen  0);
      border-radius:8px;
    }
    .corner:before{
        content: '';
        position: absolute;
        top: 0; right: 0;
        background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
        width: 1.73em;
        height: 3em;
        transform: translateY(-1.3em) rotate(-30deg);
        transform-origin: bottom right;
        border-bottom-left-radius: inherit;
        box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
    }

  </style>

  <body>

    <div class="css-cell">
      <div class="corner"></div>
    </div>

  </body>
</html>
